// src/components/TabBar.tsx
import React from "react";
import { NavLink } from "react-router-dom";
import "./TabBar.less";

const TabBar: React.FC = () => {
  return (
    <div className="tabBar">
      <NavLink
        to="/home"
        className={({ isActive }) => (isActive ? "active " : "link")}
      >
        <img src="https://cdn.metacloud.cc/10045/image/a7b6a58f2967492d974602a4ce0f9216.webp" alt="" />
       <span> Casino</span>
      </NavLink>
      <NavLink
        to="/agent"
        className={({ isActive }) => (isActive ? "active " : "link")}
      >
        <img src="https://cdn.metacloud.cc/10045/image/4c56ff242fee4ed3b359f15fabbc1c9f.webp" alt="" />
        <span>Agent</span>
      </NavLink>
      <NavLink
        to="/settings"
        className={({ isActive }) => (isActive ? "active Deposit" : "link Deposit")}
      >
        <div className="bgCircle">
        <div className="deposiWarp">
          <img src="https://cdn.metacloud.cc/10045/image/f3c00df3e3b248499c25e81cfcf2e5ad.webp" alt="" />
        </div>
        </div>
        <span>Deposit</span>
      </NavLink>
      <NavLink
        to="/Promo"
        className={({ isActive }) => (isActive ? "active " : "link")}
      >
        <img src="https://cdn.metacloud.cc/10045/image/014084cba00341debac1799eeca12e3d.webp" alt="" />
        <span>Promo</span>
      </NavLink>
      <NavLink
        to="/profile"
        className={({ isActive }) => (isActive ? "active " : "link")}
      >
        <img src="https://cdn.metacloud.cc/10045/image/aa6613d6118d421b96803c214f15a7c0.webp" alt="" />
        <span>Profile</span>
      </NavLink>
    </div>
  );
};

export default TabBar;
